import './App.css';
import React, { FC, useEffect, useState } from 'react';
import { Work, parseWork } from "@realsee/five";
import { Line } from "@realsee/five/line";
import { createFiveProvider, FiveCanvas} from "@realsee/five/react";
import Option from './ components/option';
import Control from './ components/control';
import * as THREE from 'three';
// 创建 Provider, 参数与 new Five 参数类似
// 构造函数的具体参数见文档
const FiveProvider = createFiveProvider({});
const App: FC<{}> = (props) => {
  
  const [work, setWork] = useState<Work>() // 是否加载中
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  }) // 屏幕的宽度

  useEffect(() => {
    // -- 获取work的数据根据url
    const loadWork = (url: string) => {
      fetch(url).then((res) => {
        res.json().then(data => {
          setWork(parseWork(data.work))
          

        })
      })
    }
    loadWork('/static/work2.json')
  }, [])


  useEffect(() => {
    const onResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }
    window.addEventListener("resize", onResize, false);
    return () => window.removeEventListener("resize", onResize, false);
  });

  if (work) {
    return (
      <FiveProvider initialWork={work} >
        <Option></Option>
        <Control></Control>
        <FiveCanvas width={size.width} height={size.height} />
      </FiveProvider>
    );
  }
  return (
    <div></div>
  )
}

export default App;
